<script setup>
import {PerfectScrollbar} from 'vue3-perfect-scrollbar'
import {VForm} from 'vuetify/components/VForm'
import {defineEmits, ref} from "vue";
import {useApi} from "@/composables/useApi.js";
import showTost from "@/components/toast/index.js";
import avatar  from  '@/assets/avatar.png'
const props = defineProps({
  isDrawerOpen: {
    type: Boolean,
    required: true,
  },
  gradeList: {
    type: Array,
    required: true
  },
  classList: {
    type: Array,
    required: true
  },
  detailData: {
    type: Object,
    required: true
  },
  title: {
    type: String,
    default: '详情'
  },
})

const emit = defineEmits(['update:isDrawerOpen', 'onHandleEdit', 'onHandleDelete'])

const handleDrawerModelValueUpdate = val => {
  emit('update:isDrawerOpen', val)
}

const refVForm = ref()
const resetForm = () => {


  emit('update:isDrawerOpen', false)
}

const closeNavigationDrawer = () => {
  emit('update:isDrawerOpen', false)
  nextTick(() => {
    refVForm.value?.reset()
    refVForm.value?.resetValidation()
  })
}
const form = ref({})
const assignmentData = () => {
  console.log(props.detailData)
  form.value = JSON.parse(JSON.stringify(props.detailData))
}

import {storeToRefs} from "pinia"
import {useAppStore} from "../../../store/app"
import * as XLSX from "xlsx";
import UploadImg from "@/components/uploadImg.vue";
import {set} from "@vueuse/core";
import UploadOtherFile from "@/components/uploadOtherFile.vue";

const appStore = useAppStore()

const {nationArr, sexArr} = storeToRefs(appStore)
watch(() => props.isDrawerOpen, () => {
  assignmentData()
})
const isEdit = ref(false)
let sexList = ref(['男', '女'])
let nationList = ref(['汉族', '满族'])

const onHandleEditData = async () => {
  if (isEdit.value === true) {

    const {data} = await useApi('/teacher/Api.Student/add').post({...form.value})
    if (data.value.status == 200) {
      emit('onHandleEdit')
      showTost("成功", {duration: 3000, type: "success"})
      emit('update:isDrawerOpen', false)
      isEdit.value = false
    }
  } else {
    isEdit.value = true
  }
}
const updatePassword = async () => {
  const {data} = await useApi('/teacher/Api.Teacher/resetPwd').post({
    teacher_id: props.detailData.teacher_id,
    password: '000000'
  })
  if (data.value.status == 200) {
    showTost("重置密码成功", {duration: 3000, type: "success"})

    emit('onHandleEdit')
  }
}
const onDelete = () => {
  emit('onHandleDelete', form.value)
}
const required = (value, name) => !!value || `${name}为必填字段`;

// 上传照片和体检报告
const httpRequest = (e,type) => {
  let file = e.file // 文件信息
  if (!file) {
    return false
  }
  // 上传照片
  if(type==1){
    if(!/\.(png|jpg)$/.test(file.name.toLowerCase())){
      this.$message.error('上传格式不正确，请上传png或者jpg格式')
      return false
    }
  }
const uploadMsg = useApi('/teacher/Upload/upload').post(file)
  console.log(uploadMsg)
  return


  const fileReader = new FileReader()
  fileReader.onload = (ev) => {
    try {
      const data = ev.target.result
      const workbook = XLSX.read(data, {
        // 以字符编码的方式解析
        type: 'binary',
        cellDates: true,

      })
      // 取第一张表
      console.log(workbook)
      const exlname = workbook.SheetNames[0]
      const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容
      console.log(exl)
      partPost(exl)
      // 将 JSON 数据挂到 data 里
      let arr = []
      exl.forEach(item => {
        arr.push(item.name)
      })
      console.log(arr)
    } catch (e) {
      console.log('error')
      return false
    }
  }
  fileReader.readAsBinaryString(file)
}
const  returnFile=(e, target) => {
  set(form, target, e)
}
</script>

<template>
  <VNavigationDrawer
    :model-value="props.isDrawerOpen"
    temporary
    location="end"
    width="370"
    @update:model-value="handleDrawerModelValueUpdate"
  >
    <!-- 👉 Header -->
    <AppDrawerHeaderSection
      :title="title"
      @cancel="closeNavigationDrawer"
    />
    <VDivider/>

    <VCard flat>
      <PerfectScrollbar
        :options="{ wheelPropagation: false }"
        class="h-100"
      >
        <VCardText style="block-size: calc(100dvh - 5rem);">
          <VForm
            :disabled="!isEdit"
            ref="refVForm"
            @submit.prevent=""
          >
            <VRow>
              <VCol>
                <div class="text-body-1 font-weight-medium text-high-emphasis">
                  基本信息
                </div>
              </VCol>

              <VCol cols="12">
                <VRow>
                  <VCol cols="12">
                    <VTextField
                      v-model="form.real_name"
                      label="姓名"
                      :rules="[(val)=>required(val,'姓名')]"
                      placeholder="请输入姓名"
                    />
                  </VCol>
                </VRow>
              </VCol>
              <VCol cols="6">
                <VSelect
                  v-model="form.sex"
                  :items="sexList"
                  item-title="title"
                  item-value="title"
                  placeholder="请选择性别"
                  :rules="[(val)=>required(val,'性别')]"
                  label="性别"
                  class="input-width-height"
                />
              </VCol>
              <VCol cols="6">
                <VSelect
                  v-model="form.grade_id"
                  :items="props.gradeList"
                  item-title="title"
                  item-value="grade_id"
                  placeholder="请选择所属年级"
                  label="所属年级"
                  :rules="[(val)=>required(val,'所属年级')]"
                  class="input-width-height"
                />

              </VCol>
              <VCol cols="6">
                <VSelect
                  v-model="form.class_id"
                  :items="classList"
                  item-title="title"
                  item-value="class_id"
                  placeholder="请选择所属班级"
                  label="所属班级"
                  :rules="[(val)=>required(val,'所属班级')]"
                  class="input-width-height"
                />
              </VCol>
              <VCol cols="6">
                <AppDateTimePicker
                  class="input-width-height"
                  v-model="form.brith_time"
                  label="出生日期"
                  placeholder="请选择出生日期"
                  :rules="[(val)=>required(val,'出生日期')]"
                />
              </VCol>
              <VCol cols="6">
                <VSelect
                  v-model="form.nation"
                  :items="nationArr"
                  item-title="title"
                  item-value="title"
                  placeholder="请选择民族"
                  label="民族"
                  :rules="[(val)=>required(val,'民族')]"
                  class="input-width-height"
                />
              </VCol>
              <VCol cols="6">
                <VTextField
                  v-model="form.studentId"
                  label="学生id"
                  disabled
                  :rules="[(val)=>required(val,'学生id')]"
                />
              </VCol>
              <VCol cols="12">
                <AppDateTimePicker
                  class="input-width-height"
                  v-model="form.enter_time"
                  label="入学日期"
                  placeholder="请选择入学日期"
                  :rules="[(val)=>required(val,'入学日期')]"
                />
              </VCol>
              <VCol cols="12">
                <div class="text-body-1 font-weight-medium text-high-emphasis">
                  拓展信息
                </div>
              </VCol>
              <VCol cols="12">
                <VTextField
                  v-model="form.idCard"
                  type="number"
                  placeholder="身份证号码"
                  :rules="[(val)=>required(val,'身份证号码')]"
                  label="请输入身份证号码"
                />
              </VCol>
              <VCol cols="6">
                <VTextField
                  v-model="form.fatherName"
                  label="父亲姓名"
                  :rules="[(val)=>required(val,'父亲姓名')]"
                  placeholder="请输入父亲姓名"
                />
              </VCol>
              <VCol cols="6">
                <VTextField
                  v-model="form.fatherPhone"
                  label="手机号"
                  :rules="[(val)=>required(val,'手机号')]"
                  placeholder="请输入手机号"
                />
              </VCol>
              <VCol cols="6">
                <VTextField
                  v-model="form.motherName"
                  label="母亲姓名"
                  :rules="[(val)=>required(val,'母亲姓名')]"
                  placeholder="请输入母亲姓名"
                />
              </VCol>
              <VCol cols="6">
                <VTextField
                  v-model="form.motherPhone"
                  label="手机号"
                  :rules="[(val)=>required(val,'手机号')]"
                  placeholder="请输入手机号"
                />
              </VCol>
              <VCol cols="6">
                <VTextField
                  v-model="form.emergencyName"
                  label="紧急联系人"
                  :rules="[(val)=>required(val,'紧急联系人')]"
                  placeholder="请输入紧急联系人"
                />
              </VCol>
              <VCol cols="6">
                <VTextField
                  v-model="form.emergencyPhone"
                  label="手机号"
                  :rules="[(val)=>required(val,'手机号')]"
                  placeholder="请输入手机号"
                />
              </VCol>
              <VCol cols="12">
                <VTextField
                  v-model="form.address"
                  label="家庭住址"
                  :rules="[(val)=>required(val,'家庭住址')]"
                  placeholder="请输入家庭住址"
                />
              </VCol>
              <VCol cols="12" >
                <div class="mb-1">个人照片</div>
              <VCol cols="12">
                <UploadImg
                  :limit="1"
                  :disabled="!isEdit"
                  :value="form.phoneImg"
                  @input="(val) => {form.phoneImg = val}"
                />
              </VCol>
              </VCol>
              <VCol cols="12">
                <VRow class="align-center justify-between">
                  <VCol cols="8">
                    <VTextField
                      disabled
                      v-model="form.physicalFile"
                      placeholder="体检报告上传"
                    />
                  </VCol>
                  <upload-other-file
                    :limit="1"
                    :disabled="!isEdit"
                    :value="form.physicalFile"
                    @input="(val) => {form.physicalFile = val}"
                  >
                  <VBtn

                    stlye="margin-left:10px;"
                    color="#8C57FF"
                    borderColor="#8C57FF"
                    variant="outlined"
                    class="delete-button"
                  >
                    选择文件
                  </VBtn>
                  </upload-other-file>
                </VRow>
              </VCol>
              <VCol cols="12">
                <div class="d-flex justify-end">
                  <VBtn
                    color="primary"
                    class="me-4"
                    @click="onHandleEditData"
                  >
                    {{ isEdit == true ? '保存' : '编辑' }}
                  </VBtn>
                  <VBtn
                    color="error"
                    variant="outlined"
                    @click="onDelete"
                  >
                    删除
                  </VBtn>
                </div>
              </VCol>
            </VRow>
          </VForm>
        </VCardText>
      </PerfectScrollbar>
    </VCard>
  </VNavigationDrawer>
</template>

<style lang="scss">

.delete-button{
  border-color: #8C57FF !important;
  height: 46px !important;
}
.v-navigation-drawer__content {
  overflow-y: hidden !important;
}

</style>
